import { defineComponent, shallowRef } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  name: 'modelComponent',
  props: {
    modelValue: {
      type: Object,
      required: true,
    },
  },
  setup() {
    const dialogVisible = shallowRef(false)

    const changeVisible = () => {
      dialogVisible.value = !dialogVisible.value
    }

    return () => (
      <>
        <div
          class="h-30px pa-[4px_11px] b-1 b-solid b-#d9d9d9 border-rd-6px transition-all duration-100 hover:b-#4096ff"
          onClick={changeVisible}
        >
          <span>我是模型组件</span>
          <DownOutlined
            class={{
              'transition-transform duration-300 position-absolute right-10px top-50% transform-translate-y--50%': true,
              'transform-rotate-180': dialogVisible.value,
            }}
          />
        </div>
        <a-modal v-model:open={dialogVisible.value} title="选择模型" centered>
          <p>Some contents...</p>
        </a-modal>
      </>
    )
  },
})
